<template>
  <div>
    <h1> {{ message }}</h1>
    <!-- 过滤器 可被用于一些常见的文本格式化 -->
    <!-- 在双花括号中
      | 管道符
      message | capitalize => capitalize(message)
    -->
    <h1> {{ message | capitalize }}</h1>

    <!-- 这里，gczpl被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数
    表达式 arg2 的值作为第三个参数。 -->
    <!-- gczpl('-怡','-心') => gczpl(capitalize(message,参数1，参数2)) -->
    <h1> {{ message | capitalize | gczpl('-怡','-心') }}</h1>
  </div>
</template>

<script>
export default {
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString() // 转字符串
      // charAt获取字符串第几个 charAt(0)获取第一个 这里的例子 'a'
      // toUpperCase() 'a' -> 'A'
      // value.slice(1) 字符串索引是1的截取 'bc - hello'
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    gczpl: function(value, arg1, arg2) {
      return value + '纯纯物语' + arg1 + arg2
    }
  },
  data() {
    return {
      message: 'abcdefg'
    }
  }
}

// 或者在创建 Vue 实例之前全局定义过滤器
// Vue.filter('capitalize', function (value) {
//   if (!value) return ''
//   value = value.toString()
//   return value.charAt(0).toUpperCase() + value.slice(1)
// })

</script>

<style>

</style>
